<template>
    <el-scrollbar height="100%">
        <div id="site2">
            <div class="top">
                <el-select v-model="displayGroup">
                    <el-option :value="allKey" label="全部"></el-option>
                    <el-option :value="latelyKey" label="最近"></el-option>
                    <el-option v-for="item in navGroups" :value="item"></el-option>
                </el-select>
                <el-input class="search" v-model="searchText" placeholder="Filter..."></el-input>
            </div>
            <div class="content">
                <siteGroup v-if="showHistorySite" :arr="filteredHistoryArr" @nav-click="addHistory"
                    @menu="showMenu('最近访问', $event)" @nav-del="delNav('最近访问', $event)">
                    <template v-slot:title>
                        <div class="jc">
                            最近访问
                            <transition name="el-fade-in">
                                <svg v-if="showHistoryButton" @click="getHistory" t="1676981897450"
                                    style="margin-left: 15px;cursor: pointer;" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2913" width="25" height="25">
                                    <path
                                        d="M456.095759 890.332674c-134.644583 0.007163-265.168312-71.92103-333.536422-198.451818-48.044226-88.925309-58.588373-191.242625-29.686113-288.094464s93.793176-176.646186 182.711322-224.698598c183.593412-99.162464 413.593759-30.524201 512.785899 153.024186 48.613184 89.979314 35.982516 189.096752 22.25384 255.828596l-30.000268-6.176676c12.764722-62.034868 24.661679-153.906276-19.202341-235.085156-91.145883-168.70533-302.571177-231.80239-471.269343-140.641157-81.731466 44.155662-141.366681 117.498064-167.927617 206.512401-26.568099 89.007173-16.877389 183.039803 27.28646 264.764106 91.15407 168.720679 302.586526 231.795227 471.269343 140.641157l14.566764 26.949792C578.312288 875.713722 516.777817 890.332674 456.095759 890.332674z"
                                        fill="#14AEED" p-id="2914"></path>
                                    <path d="M795.624662 584.850192" fill="#14AEED" p-id="2915"></path>
                                    <path
                                        d="M795.322787 618.628506 681.295777 452.331016 706.555068 435.012581 801.096281 572.894905 926.94657 462.8373 947.106726 485.898529Z"
                                        fill="#14AEED" p-id="2916"></path>
                                </svg>
                            </transition>
                        </div>
                    </template>
                </siteGroup>
                <template v-for="item in filteredNav">
                    <siteGroup :arr="item.navs" @nav-click="addHistory" @menu="showMenu(item, $event)"
                        @nav-del="delNav(item, $event)">
                        <template v-slot:title>
                            <div>{{ item.name }}</div>
                        </template>
                    </siteGroup>
                </template>
            </div>
            <div class="fiexd-btn fiexd-btn-home" @click="goHome">
                <svg style="width: 25px;" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-78e17ca8="">
                    <path fill="currentColor" d="M512 128 128 447.936V896h255.936V640H640v256h255.936V447.936z"></path>
                </svg>
            </div>
            <div class="fiexd-btn fiexd-btn-addSite" @click="addSite">
                <svg t="1685619387393" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="2393" style="width: 25px;">
                    <path
                        d="M801.171 483.589H544V226.418c0-17.673-14.327-32-32-32s-32 14.327-32 32v257.171H222.83c-17.673 0-32 14.327-32 32s14.327 32 32 32H480v257.17c0 17.673 14.327 32 32 32s32-14.327 32-32v-257.17h257.171c17.673 0 32-14.327 32-32s-14.327-32-32-32z"
                        fill="#1296db" p-id="2394"></path>
                </svg>
            </div>
        </div>
        <el-dialog :title="addOrUpdateFormDialogTitle" v-model="dialogFormVisible">
            <el-form :model="addSiteForm" label-position="right" label-width="55px" ref="addSiteForm" :rules="addFormRules">
                <el-form-item label="链接" prop="url">
                    <el-input v-model="addSiteForm.url" placeholder="网页链接"></el-input>
                </el-form-item>
                <el-form-item label="图标" prop="logo">
                    <div style="display: flex;gap:15px;width: 100%;">
                        <el-input v-model="addSiteForm.logo" placeholder="网站图标链接"></el-input>
                        <el-button @click="scannerLogo">选择</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="预览">
                    <div class="select-logos">
                        <el-image :src="addSiteForm.logo" @error="imageError">
                            <template #error>
                                <svg t="1660111518563" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2094" width="200" height="200">
                                    <path
                                        d="M512.724 585.617c-39.687 0-75.663 21.92-93.885 57.208-3.232 6.259-0.779 13.951 5.48 17.185 6.258 3.231 13.953 0.779 17.185-5.481 13.826-26.771 41.117-43.402 71.221-43.402 30.105 0 57.394 16.631 71.221 43.402a12.756 12.756 0 0 0 11.343 6.906c1.97 0 3.97-0.459 5.842-1.425 6.258-3.233 8.713-10.926 5.48-17.185-18.224-35.288-54.198-57.208-93.887-57.208z"
                                        fill="#333333" p-id="2095"></path>
                                    <path
                                        d="M874.096 143.875H151.352c-28.982 0-52.676 23.692-52.676 52.676V709.74c0 28.984 23.693 52.677 52.676 52.677h39.335c2.53 7.36 6.901 14.721 13.342 21.621 1.61 1.61 3.68 2.762 5.981 3.451 66.017 17.022 82.348 38.185 86.03 49.226 4.371 12.421-2.76 22.312-3.221 23.003-4.14 5.29-3.221 13.112 2.071 17.482 5.52 4.371 13.341 3.45 17.711-2.071 5.981-7.591 14.262-25.763 7.591-46.005-9.432-27.834-43.015-49.915-100.061-65.098-4.831-5.751-6.211-10.35-6.211-14.031v-0.23c0-5.06 3.221-10.121 8.971-14.492 0 0 0.229-0.229 0.459-0.229 1.61-1.38 3.451-2.531 5.52-3.451l1.38-0.691c2.531-1.38 5.292-2.3 8.052-3.219 4.371-1.151 12.191-2.531 24.843-2.531 21.851 0 47.614 4.371 76.367 12.881 4.831 2.071 9.432 4.142 14.492 6.902 1.38 0.689 2.76 1.61 4.371 2.3 5.981 3.451 11.962 7.131 18.173 11.501 0.459 0.23 0.92 0.461 1.61 0.92 96.381 67.628 85.569 101.673 85.569 101.673-3.221 6.21-0.92 13.801 5.29 17.022 1.841 1.15 3.911 1.61 5.981 1.61 4.371 0 8.741-2.53 11.042-6.672 3.91-7.59 17.022-45.315-62.798-110.871h178.961c-79.82 65.557-66.708 103.282-62.798 110.871 2.301 4.142 6.672 6.672 11.042 6.672 2.069 0 4.14-0.461 5.981-1.61 6.21-3.221 8.511-10.812 5.29-17.022 0 0-10.812-34.045 85.569-101.673 0.691-0.459 1.151-0.689 1.61-0.92 6.211-4.371 12.192-8.05 18.173-11.501 1.61-0.689 2.99-1.61 4.371-2.3 5.06-2.76 9.661-4.831 14.492-6.902 28.753-8.511 54.516-12.881 76.367-12.881 12.653 0 20.473 1.38 24.843 2.531 2.76 0.92 5.52 1.839 8.052 3.219l1.38 0.691c2.069 0.92 3.91 2.071 5.52 3.451 0.23 0 0.459 0.229 0.459 0.229 5.751 4.371 8.971 9.432 8.971 14.492v0.23c0 3.681-1.38 8.281-6.211 14.031-57.046 15.182-90.629 37.264-100.061 65.098-6.67 20.242 1.61 38.414 7.591 46.005 4.371 5.52 12.191 6.441 17.711 2.071 5.292-4.371 6.211-12.192 2.071-17.482-0.461-0.691-7.591-10.582-3.221-23.003 3.681-11.041 20.012-32.204 86.03-49.226 2.301-0.689 4.371-1.841 5.981-3.451 6.441-6.901 10.812-14.262 13.342-21.621h39.335c28.982 0 52.676-23.693 52.676-52.677V196.551c0.003-28.984-23.691-52.676-52.673-52.676zM341.815 638.432c15.642 40.024 6.211 62.797-0.46 72.688-1.15-0.459-2.3-0.689-3.45-1.15-14.952-5.751-29.674-9.202-43.245-11.041-1.151-0.23-2.531-0.461-3.681-0.461-6.44-0.92-12.651-1.15-18.632-1.38-1.38 0-2.76 0.23-4.14 0.23-5.06 0.23-9.891 0.459-14.492 1.15-1.15 0-2.53 0.23-3.68 0.23-0.921 0.23-1.841 0.461-2.76 0.689 4.371-20.932 7.361-51.756-6.441-72.457-14.722-22.083-18.172-90.63-0.23-142.156 7.591-22.313-1.61-62.568-8.05-85.57h112.023c4.831 16.563 12.881 58.887-6.211 112.483l-1.38 3.68c-9.202 25.534-20.475 57.506 4.829 123.065z m442.8-11.502c-13.802 20.702-10.812 51.526-6.441 72.457l-2.76-0.689c-1.15 0-2.53-0.23-3.68-0.23-4.601-0.691-9.432-0.92-14.492-1.15-1.38 0-2.76-0.23-4.14-0.23-5.981 0.23-12.192 0.461-18.632 1.38-1.15 0-2.53 0.23-3.681 0.461-13.571 1.839-28.293 5.29-43.245 11.041-1.15 0.46-2.3 0.691-3.45 1.15-6.672-9.891-16.102-32.663-0.461-72.688 25.304-65.558 14.031-97.531 4.831-123.065l-1.38-3.68c-19.093-53.597-11.042-95.921-6.211-112.483h112.023c-6.44 23.003-15.642 63.257-8.05 85.57 17.941 51.526 14.491 120.073-0.231 142.156z m117.083 82.809c0 15.183-12.421 27.603-27.373 27.603h-39.564c-1.15-2.99-2.53-5.751-4.14-8.281v-0.23c-1.38-1.841-2.53-3.681-4.14-5.52-0.461-0.461-0.921-1.15-1.61-1.61l-0.691-0.691a65.525 65.525 0 0 0-5.98-5.29c-0.921-0.691-1.61-1.38-2.531-1.841-1.61-1.15-3.45-2.3-5.29-3.45-0.92-0.46-1.841-1.151-2.76-1.61-0.461-0.23-0.691-0.23-1.15-0.46-4.601-16.102-11.732-51.065-0.921-67.398 20.703-31.053 22.083-109.493 3.221-164.469-5.29-15.181 2.76-52.215 10.582-77.288h4.83c7.131 0 12.653-5.52 12.653-12.651 0-6.9-5.522-12.421-12.653-12.421h-163.32a12.369 12.369 0 0 0-12.421 12.421c0 5.06 2.76 8.971 6.9 11.271-5.751 22.313-11.732 66.708 8.05 122.144l1.38 3.91c8.052 22.774 17.252 48.537-4.601 105.583-17.941 46.005-8.511 76.139 0.921 92.241-0.921 0.46-1.61 0.92-2.53 1.38-6.902 3.68-13.802 8.05-20.703 12.651-0.691 0.461-1.61 0.92-2.3 1.38H389.89c-0.689-0.461-1.609-0.92-2.3-1.38-6.901-4.601-13.801-8.971-20.703-12.651-0.92-0.461-1.609-0.92-2.53-1.38 9.432-16.102 18.862-46.236 0.921-92.241-21.853-57.046-12.653-82.809-4.601-105.583l1.38-3.91c19.782-55.436 13.801-99.831 8.05-122.144 4.14-2.3 6.901-6.211 6.901-11.271 0-6.9-5.52-12.421-12.421-12.421H201.269c-7.131 0-12.653 5.52-12.653 12.421 0 7.131 5.522 12.651 12.653 12.651h4.83c7.822 25.073 15.872 62.107 10.582 77.288-18.862 54.977-17.482 133.416 3.221 164.469 10.811 16.332 3.68 51.295-0.921 67.398-0.459 0.23-0.689 0.23-1.15 0.46-0.92 0.459-1.841 1.15-2.76 1.61-1.841 1.15-3.68 2.3-5.29 3.45-0.921 0.461-1.61 1.15-2.531 1.841a65.793 65.793 0 0 0-5.98 5.29l-0.691 0.691c-0.689 0.46-1.15 1.15-1.61 1.61-1.61 1.839-2.76 3.68-4.14 5.52v0.23c-1.61 2.53-2.99 5.29-4.14 8.281h-39.564c-14.952 0-27.373-12.421-27.373-27.603V196.551c0-15.181 12.421-27.373 27.373-27.373h723.201c14.952 0 27.373 12.192 27.373 27.373v513.188z"
                                        fill="#333333" p-id="2096"></path>
                                </svg>
                            </template>
                            <template #placeholder>
                                <svg t="1660112100644" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4811" width="200" height="200">
                                    <path
                                        d="M512 337.322667a26.666667 26.666667 0 0 1-26.666667-26.666667V197.333333a26.666667 26.666667 0 1 1 53.333334 0v113.322667c0 14.762667-11.946667 26.666667-26.666667 26.666667z"
                                        fill="#000000" p-id="4812"></path>
                                    <path
                                        d="M424.661333 360.746667a26.666667 26.666667 0 0 1-36.394666-9.728l-56.661334-98.133334a26.666667 26.666667 0 0 1 46.122667-26.666666l56.661333 98.133333a26.624 26.624 0 0 1-9.728 36.394667z"
                                        fill="#000000" opacity=".9" p-id="4813"></path>
                                    <path
                                        d="M360.746667 424.661333a26.624 26.624 0 0 1-36.394667 9.728l-98.133333-56.661333a26.624 26.624 0 1 1 26.666666-46.122667l98.133334 56.661334c12.714667 7.338667 17.066667 23.68 9.728 36.394666z"
                                        fill="#000000" opacity=".85" p-id="4814"></path>
                                    <path
                                        d="M337.322667 512c0 14.72-11.946667 26.666667-26.666667 26.666667H197.333333a26.666667 26.666667 0 1 1 0-53.333334h113.322667c14.762667 0 26.666667 11.946667 26.666667 26.666667z"
                                        fill="#000000" opacity=".8" p-id="4815"></path>
                                    <path
                                        d="M360.746667 599.338667a26.666667 26.666667 0 0 1-9.728 36.394666l-98.133334 56.661334a26.666667 26.666667 0 0 1-26.666666-46.122667l98.133333-56.661333a26.624 26.624 0 0 1 36.394667 9.728z"
                                        fill="#000000" opacity=".75" p-id="4816"></path>
                                    <path
                                        d="M424.661333 663.253333a26.624 26.624 0 0 1 9.728 36.394667l-56.661333 98.133333a26.624 26.624 0 1 1-46.122667-26.666666l56.661334-98.133334a26.666667 26.666667 0 0 1 36.394666-9.728z"
                                        fill="#000000" opacity=".7" p-id="4817"></path>
                                    <path
                                        d="M512 686.677333c14.72 0 26.666667 11.946667 26.666667 26.666667v113.322667a26.666667 26.666667 0 1 1-53.333334 0v-113.322667c0-14.762667 11.946667-26.666667 26.666667-26.666667z"
                                        fill="#000000" opacity=".65" p-id="4818"></path>
                                    <path
                                        d="M599.338667 663.253333a26.666667 26.666667 0 0 1 36.394666 9.728l56.661334 98.133334a26.666667 26.666667 0 0 1-46.122667 26.666666l-56.661333-98.133333a26.624 26.624 0 0 1 9.728-36.394667z"
                                        fill="#000000" opacity=".6" p-id="4819"></path>
                                    <path
                                        d="M663.253333 599.338667a26.624 26.624 0 0 1 36.394667-9.728l98.133333 56.661333a26.624 26.624 0 1 1-26.666666 46.122667l-98.133334-56.661334a26.666667 26.666667 0 0 1-9.728-36.394666z"
                                        fill="#000000" opacity=".55" p-id="4820"></path>
                                    <path
                                        d="M686.677333 512c0-14.72 11.946667-26.666667 26.666667-26.666667h113.322667a26.666667 26.666667 0 1 1 0 53.333334h-113.322667a26.666667 26.666667 0 0 1-26.666667-26.666667z"
                                        fill="#000000" opacity=".5" p-id="4821"></path>
                                    <path
                                        d="M663.253333 424.661333a26.666667 26.666667 0 0 1 9.728-36.394666l98.133334-56.661334a26.666667 26.666667 0 0 1 26.666666 46.122667l-98.133333 56.661333a26.624 26.624 0 0 1-36.394667-9.728z"
                                        fill="#000000" opacity=".4" p-id="4822"></path>
                                    <path
                                        d="M599.338667 360.746667a26.624 26.624 0 0 1-9.728-36.394667l56.661333-98.133333a26.624 26.624 0 1 1 46.122667 26.666666l-56.661334 98.133334a26.666667 26.666667 0 0 1-36.394666 9.728z"
                                        fill="#000000" opacity=".3" p-id="4823"></path>
                                </svg>
                            </template>
                        </el-image>
                    </div>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <div style="display: flex;gap:15px;width: 100%;">
                        <el-input v-model="addSiteForm.name" placeholder="网站的名称"></el-input>
                        <el-button @click="scannerTitle">选择</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="描述" prop="desc">
                    <el-input v-model="addSiteForm.desc" placeholder="网站的描述"></el-input>
                </el-form-item>
                <el-form-item label="分组" prop="grp">
                    <el-select v-model="addSiteForm.grp" filterable allow-create default-first-option no-data-text="无分组"
                        placeholder="网站分组">
                        <el-option v-for="(v, index) in navGroups" :value="v" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公开" prop="isPublic">
                    <el-switch v-model="addSiteForm.isPublic" active-color="#13ce66" inactive-color="#ccc" active-text="是"
                        inactive-text="否"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitAdd" v-if="isFormUpdateState">修 改</el-button>
                <el-button type="primary" @click="submitAdd" v-else>添 加</el-button>
            </div>
        </el-dialog>
        <el-dialog title="请选择一个图标" v-model="dialogSelectLogoVisible">
            <div class="select-logos">
                <el-image @click="selectLogo(item)" v-for="(item, index) in logoUrl" :src="item" :key="index"
                    @error="imageError"></el-image>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogSelectLogoVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog title="请选择一个名称" v-model="dialogSelectTitleVisible">
            <div class="select-logos">
                <div @click="selectTitle(item)" v-for="(item, index) in titles" :key="index">{{ item }}</div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogSelectTitleVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <el-drawer title="选项" v-model="showDrawer" direction="btt" size="35%">
            <div class="site-menu">
                <el-button @click="showEditForm" v-if="!isMenuEditDisabled">编辑</el-button>
                <el-button @click="handleDelete" v-if="!isMenuDeleteDisabled">删除</el-button>
                <el-button @click="addCollection">添加收藏</el-button>
            </div>
        </el-drawer>
    </el-scrollbar>
</template>
<script>
import { getHistory, getNavSite, getRecommend, addNavSite, getSiteLogoAndTitle, addHistory, delNavHistory, delNav } from '@/api/nav.js';
import siteGroup from '@/components/site/SiteGroup2.vue';
export default {
    data() {
        let isSite = (rule, value, callback) => {
            if (value) {
                if (value.startsWith('http://') || value.startsWith('https://')) {
                    callback();
                } else {
                    callback(new Error('请输入以http或https开头的标准网址'));
                }
            } else {
                callback();
            }
        };
        return {
            showDrawer: false,
            displayGroup: '',
            allKey: new Date().getTime() + 'AllKey',
            latelyKey: new Date().getTime() + 'latelyKey',
            searchText: '',
            nav: [],
            navGroups: [],
            historyArr: [],
            showHistoryButton: true,
            dialogFormVisible: false,
            addOrUpdateFormDialogTitle: '',
            addSiteForm: null,
            isFormUpdateState: false,
            logoUrl: [],
            titles: [],
            htmlCache: {},
            dialogSelectTitleVisible: false,
            dialogSelectLogoVisible: false,
            addSiteFormBack: {
                url: 'https://www.bilibili.com/',
                logo: '',
                name: '',
                isPublic: false,
                grp: '默认分组',
                desc: ''
            },
            addFormRules: {
                url: [
                    { required: true, message: '请输入网站链接', trigger: 'blur' },
                    { max: 250, message: '最长250字符', trigger: 'blur' },
                    { validator: isSite, trigger: 'blur' }
                ],
                logo: [
                    { max: 250, message: '最长250字符', trigger: 'blur' },
                    { validator: isSite, trigger: 'blur' }
                ],
                name: [{ required: true, message: '请输入网站名称', trigger: 'blur' }, { max: 250, message: '最长250字符', trigger: 'blur' }],
                desc: [{ max: 250, message: '最长250字符', trigger: 'blur' }],
                grp: [{ max: 250, message: '最长250字符', trigger: 'blur' }, { required: true, message: '请选择网站分组', trigger: 'blur' }]
            },
        }
    },
    created() {
        this.getNavList()
        this.getHistory()
        this.displayGroup = this.allKey
    },
    methods: {
        showMenu(grp, item) {
            this.currentItem = {
                item,
                grp
            };
            console.log(grp, item)
            this.showDrawer = true;
        },
        delNav(grp, item) {
            this.currentItem = {
                item,
                grp
            };
            if(grp!=='最近访问'){
                this.handleDelete()
            }else{
                this.rightDel()
            }
        },
        imageError(err) { },
        scannerLogo() {
            this.getSiteLogoAndTitle(() => {
                this.dialogSelectLogoVisible = true;
            }, 1);
        },
        scannerTitle() {
            this.getSiteLogoAndTitle(() => {
                this.dialogSelectTitleVisible = true;
            }, 2);
        },
        selectLogo(url) {
            this.addSiteForm.logo = url;
            this.dialogSelectLogoVisible = false;
        },
        selectTitle(title) {
            this.addSiteForm.name = title;
            this.dialogSelectTitleVisible = false;
        },
        submitAdd() {
            this.$refs.addSiteForm.validate(valid => {
                if (valid) {
                    addNavSite(this.addSiteForm).then(res => {
                        if (res.code == 200) {
                            if (this.isFormUpdateState) {
                                this.$message.success('修改成功');
                            } else {
                                this.$message.success('添加成功');
                            }
                            this.dialogFormVisible = false;
                            this.getNavList();
                            this.$refs['addSiteForm'].resetFields();
                            if (typeof this.currentItem.grp === 'string') {
                                this.getHistory()
                            }
                        } else {
                            this.$msgError(res);
                        }
                    });
                }
            })
        },
        addSite() {
            this.dialogFormVisible = true
            this.addOrUpdateFormDialogTitle = '添加网站'
            this.isFormUpdateState = false
            this.addSiteForm = Object.assign({}, this.addSiteFormBack)
        },
        getNavList() {
            getNavSite().then(res => {
                if (res.code == 200) {
                    console.log(res)
                    this.nav = res.data;
                    let arr = [];
                    res.data.forEach(item => {
                        arr.push(item.name);
                    });
                    this.navGroups = arr;
                } else {
                    this.nav = [];
                    this.navGroups = [];
                }
            });
        },
        addHistory(item) {
            addHistory(item.id);
        },
        getHistory() {
            this.showHistoryButton = false;
            clearTimeout(window.gndisoghsdfsaljfk);
            window.gndisoghsdfsaljfk = setTimeout(() => {
                this.showHistoryButton = true;
            }, 2000);

            getHistory()
                .then(res => {
                    this.showHistoryButton = false;
                    clearTimeout(window.gndisoghsdfsaljfk);
                    window.gndisoghsdfsaljfk = setTimeout(() => {
                        this.showHistoryButton = true;
                    }, 1000);
                    if (res.code == 200) {
                        this.historyArr = res.data;
                    } else {
                        this.historyArr = [];
                    }
                })
                .catch(e => {
                    this.showHistoryButton = false;
                    this.historyArr = [];
                    clearTimeout(window.gndisoghsdfsaljfk);
                    window.gndisoghsdfsaljfk = setTimeout(() => {
                        this.showHistoryButton = true;
                    }, 1000);
                });
        },
        goHome() {
            this.$router.push('/');
        },
        getSiteLogoAndTitle(cb, type) {
            let url = this.addSiteForm.url;
            if (this.htmlCache[url] && type == 1 && this.htmlCache[url].hrefs && this.htmlCache[url].hrefs.length) {
                cb();
                return;
            }
            if (this.htmlCache[url] && type == 2 && this.htmlCache[url].title && this.htmlCache[url].title.length) {
                cb();
                return;
            }
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            getSiteLogoAndTitle(url).then(res => {
                loading.close();
                if (res.code != 200) {
                    return this.$msgError(res);
                }
                console.log(res)
                let hrefs = res.data.logo
                let title = [res.data.title]
                this.logoUrl = hrefs;
                this.titles = title;
                this.htmlCache[url] = {};
                this.htmlCache[url].logo = hrefs;
                this.htmlCache[url].title = title;
                cb();
            }).catch(e => {
                loading.close();
            })
        },
        showEditForm() {
            this.addOrUpdateFormDialogTitle = "编辑网站"
            this.dialogFormVisible = true
            this.showDrawer = false
            this.isFormUpdateState = true
            for (let grp of this.nav) {
                for (let item of grp.navs) {
                    if (item.id === this.currentItem.item.id) {
                        this.addSiteForm = Object.assign({}, item)
                        this.addSiteForm.grp = grp.name
                        return
                    }
                }
            }
            console.log("不是预期的结果，这里不该被执行")
        },
        handleDelete(noTip) {
            this.$confirm('确定将"' + this.currentItem.item.name + '"从"' + (this.currentItem.grp.name || '历史记录') + '"中移除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {

                    this.rightDel()

                })
                .catch((e) => { });
        },
        rightDel() {
            if (this.currentItem.grp.name) {
                delNav(this.currentItem.item.id).then(res => {
                    if (res.code == 200) {
                        this.$message.closeAll()
                        this.$message.success('删除成功');
                        this.showDrawer = false;
                        this.getNavList();
                        this.getHistory();
                    }
                });
            } else {
                delNavHistory(this.currentItem.item.id).then(res => {
                    if (res.code == 200) {
                        this.$message.closeAll()
                        this.$message.success('移除成功');
                        this.showDrawer = false;
                        this.getHistory();
                    }
                });
            }
        },
        addCollection() {
            this.addSiteForm = Object.assign({}, this.currentItem.item)
            delete this.addSiteForm.id
            this.isFormUpdateState = false
            this.addOrUpdateFormDialogTitle = '添加收藏'
            this.dialogFormVisible = true
        },
    },
    computed: {
        showHistorySite() {
            return this.allKey === this.displayGroup || this.latelyKey === this.displayGroup
        },
        filteredHistoryArr() {
            let searchText = this.searchText.trim().toUpperCase()
            if (searchText === '') {
                return this.historyArr
            }
            return this.historyArr.filter(item => {
                return item.name.toUpperCase().includes(searchText)
                    || item.url.toUpperCase().includes(searchText)
            })
        },
        user() {
            return this.$store.state.user.user;
        },
        isMenuEditDisabled() {
            let grp = this.currentItem.grp
            if (grp === null || grp === undefined) {
                return true
            }
            let selfUserId = this.user.id
            if (isNaN(selfUserId)) {
                return false;
            }
            let siteUserId = this.currentItem.item.userId
            return selfUserId !== siteUserId
        },
        isMenuDeleteDisabled() {
            let grp = this.currentItem.grp
            if (grp === null || grp === undefined) {
                return true
            }
            return false;
        },
        filteredNav() {

            let groupFiltered = this.nav.filter(item => {
                if (this.displayGroup === this.allKey) {
                    return true
                } else if (this.displayGroup === this.latelyKey) {
                    return false
                }
                return item.name === this.displayGroup
            })
            let searchText = this.searchText.trim().toUpperCase()
            if (searchText === '') {
                return groupFiltered
            }
            let arr = []
            groupFiltered.forEach(item => {
                if (item.name.toUpperCase().includes(searchText)) {
                    arr.push(item)
                } else {
                    let navs = item.navs.filter(item => {
                        return item.name.toUpperCase().includes(searchText)
                            || item.url.toUpperCase().includes(searchText)
                    })
                    if (navs.length) {
                        arr.push({
                            name: item.name,
                            navs
                        })
                    }
                }
            })
            return arr
        },

    },
    components: {
        siteGroup
    }
}
</script>
<style lang="scss">
#site2 {
    padding: 20px 50px;

    * {
        user-select: none;
    }

    .top {
        display: flex;
        justify-content: space-between;

        .search {
            width: 250px;
        }
    }

    .fiexd-btn-addSite {
        bottom: 90px;
    }

}

.site-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;

    >button {
        border: none;
        margin: 0 !important;
    }
}

.select-logos {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;

    .el-image {
        width: 40px;
        height: 40px;

        img {
            width: 40px;
            height: 40px;
        }

        .el-image__error {
            text-align: center;
            line-height: initial;
        }
    }

    svg {
        width: 40px;
        height: 40px;
    }
}
</style>